<template>
<view class="withdraw" >
  <view class="withdraw-container">
    <view class="main">
      <view class="title">提现到支付宝</view>
      <view class="input-container f-a-c f-nw f-j-b">
        <view class="f-nw f-a-c" style="width:100%;">
          ￥
          <view class="input-wrap">
            <input type="digit" v-model="tixian_num" maxlength='9' placeholder-style="color:#b1b1b1" placeholder="请输入金额"></input>
          </view>
        </view>

      </view>
      <view class="flex-j-b">
        <view class="can-all-price">可提现金额
          <text class="text-price">{{money}}</text> 元 </view>
        <view class="all" @click="all_tixian">全部提现</view>
      </view>
      <view class="flexUserInfo" >
        <view>提现至：</view>
        <view class="inout">
          <input type="text" v-model="tixian"  placeholder-style="color:#b1b1b1" placeholder="请输入账号"></input> 
        </view> 
      </view>
      <view class="flexUserInfo" >
        <view>再次确认：</view>
        <view class="inout">
          <input type="text" v-model="tixiantwo"  placeholder-style="color:#b1b1b1" placeholder="再次确认账号"></input> 
        </view> 
        <view class="tt">注意事项：提现约2~3个工作日到账</view>
      </view>
    </view>
    <view class="hint-box">

    </view>
    <view class="tixian" @click="tixian2">提现</view>
  </view>                                                                                               
</view>
</template>

<script>
	export default {
		data() {
			return {
				tixian_num: '',
                tixiantwo: '',
                tixian: "",
                money: 0,
                type: 2
			}
		},
		methods: {
			tixian2() {
			  if(this.tixian_num == null||this.tixian_num == 0){
			    wx.showToast({
			      title: '请填写金额',
			      icon:'none'
			    })
			    return
			  }
			  if(this.tixian_num <10&&this.type==2){
			    wx.showToast({
			      title: '最低10元起提',
			      icon:'none'
			    })
			    return
			  }
			  if(this.money == 0){
			    wx.showToast({
			      title: '余额不足',
			      icon:'none'
			    })
			    return
			  }
			  if(this.money*1 < this.tixian_num*1){
			    wx.showToast({
			      title: '余额不足',
			      icon:'none'
			    })
			    return
			  }
			  if(this.tixian == ''){
			    wx.showToast({
			      title: '请填写账号',
			      icon:'none'
			    })
			    return
			  }
			  if(this.tixiantwo == ''){
			    wx.showToast({
			      title: '请确认账号',
			      icon:'none'
			    })
			    return
			  }
			  if(this.tixiantwo != this.tixian){
			    wx.showToast({
			      title: '两次账号不一致',
			      icon:'none'
			    })
			    return
			  }
			  var _this =this
			  wx.showModal({
			    title:'是否提现至账户',
			    content:_this.tixian ,
			    success (res) {
			    if (res.confirm) {
                    this.$api.backMoney({
                        account: _this.tixian,
                        amount: _this.tixian_num*1,
                        uid:true,
                        html_type:_this.type
                    }).then(res=>{
                        wx.showToast({
                          title: '提现成功！',
                          icon:'success',
                          duration:2000
                        })
                    })
			    }}
			  })
			},
            all_tixian() {
                this.tixian_num = this.money;
            }
		},
        onShow() {
            this.$api.checkAccount({uid: true,type:1}).then(res=>{
                this.money = res.data.back_money
            });
        }
	}
</script>

<style>
/* pages/wallet/withdraw/withdraw.wxss */
page{
  background-color: #F3F3F3
}
.tt{
  width: 100%;
  margin-top: 20rpx;
  font-size: 24rpx;
}
.has-all-price{
    padding-top: 81rpx;
    padding-bottom: 60rpx;
    margin: 0 auto;
    text-align: center
}
.has-all-price text{
  font-size: 80rpx;
  font-weight: 500;
}
.main{
  background-color: #fff;
  width: 678rpx;
  margin: 0 auto;
  border-radius: 12rpx;
  padding: 24rpx 40rpx 50rpx 40rpx;
  box-sizing: border-box;
  box-shadow:0px 8rpx 26rpx 0px rgba(0,0,0,0.1);
  margin-top: 30rpx;
}
.input-container{
  margin: 60rpx auto;
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 18rpx;
}
.input-wrap{
  font-size: 36rpx;
  margin-left: 20rpx
}
.input-wrap input{
  width: 100%;
}
.title{
  font-size: 32rpx;

  margin-bottom: 20rpx  
}
.all{
  width: 170rpx;
  height: 55rpx;

  border-radius: 30px;
  font-size: 23rpx;
  font-weight: 500;
  line-height: 55rpx;
  text-align: center;
  color: WHITE;
  margin-top: 16rpx;
  background-color:#49e461;
  box-shadow: 0px 4rpx 2rpx 0px #49e461;
}
.hint{
  font-size: 22rpx;
  color: #6F6F6F;
  margin-top: 10rpx;
}
.hint-box{
  margin: 30rpx 56rpx;
}
.tixian{
  width: 678rpx;
  height: 88rpx;
  line-height: 88rpx;
  color: #fff;
  background-color: #49e461;
  text-align: center;
  margin: 0 auto;
  border-radius: 88rpx;
  margin-top: 71rpx;
}
.can-all-price{
  font-size: 22rpx;
}
.text-price{
  color: #F33B39;
  font-size: 45rpx;
  margin-left: 6rpx;
}
.flexUserInfo{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 30rpx;
  margin-top: 50rpx;
}

.ppFlex{
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1px solid #f8f8f8;
  font-size: 28rpx;
  justify-content: space-between;
}
.bankIcon{
  width: 60rpx;
  height: 60rpx;
}
.bankName,.bankNumber{
  margin: 12rpx 10rpx 0 20rpx;
}
.addCard{
  display: flex;
  padding: 14rpx;
  font-size: 28rpx;
  color: #2F7FF8;
}
.addCardTips{
  color: #2F7FF8;
}
.inout{
  border-bottom: 1px solid #ccc;
  width: 55%;
}
.gai{
  margin-left: 40rpx;
  width: 80rpx;
  font-size: 32rpx;
  color: #2F7FF8;
}
</style>
